<template>
  <view class="product-details-merchant">
    <v-image
      height="116rpx"
      width="116rpx"
      border-radius="50%"
      :src="product.merchant_logo"
      mode="aspectFill"
    />
    <view class="merchant-name">
      {{ product.merchant_name }}
    </view>
    <view
      class="navigate-button"
      @click="redirectToMerchant"
    >
      <view> 进店 </view>
      <wd-icon
        name="arrow-right"
        size="24rpx"
        color="#ff2f3b"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: SpuVO;
}>();

const product = toRef(props, 'product');

const redirectToMerchant = () => {
  uni.redirectTo({
    url: `/pages/merchant/merchant-details?id=${product.value.merchant_id}`
  });
};
</script>

<style lang="scss" scoped>
.product-details-merchant {
  position: relative;
  height: 164rpx;
  margin: 0 24rpx 24rpx;
  padding: 0 36rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  align-items: center;
  gap: 12rpx;
  .merchant-name {
    font-weight: bold;
    font-size: 32rpx;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .navigate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    color: #ff2f3b;
    height: 50rpx;
    width: 100rpx;
    border: 1px solid #ff2f3b;
    border-radius: 8rpx;
  }
}
</style>
